<template>

  <el-card class="info-card" style="width:auto">

    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>更改绑定手机号</div>

      </div>
    </template>
    <template #default style="display: flex;flex-direction: column;justify-content: center; align-items: center;">

      <div class="demo-collapse">
        <el-collapse-item title="更改绑定手机号" name="1">

          <div v-if="changePwdStep === 1">
            <!-- 输入框：密码 -->
            <el-input size="large" v-model="form.password" placeholder="输入密码进行校验" type="text" maxlength="30"
              class='security-input'>
              <template #prepend>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
              <template #append>
                <el-button type="primary" @click="verifyPassword" size="large">
                  下一步
                </el-button>
              </template>
            </el-input>
          </div>

          <div v-if="changePwdStep === 2">
            <!-- 输入框：手机号 -->
            <div>
              <el-input size="large" v-model="form.phone_numbers" placeholder="请输入新手机号" type="text" maxlength="11"
                class='security-input'>
                <template #prepend>
                  <el-icon>
                    <Iphone />
                  </el-icon>
                </template>


              </el-input>
            </div>
            <div>
              <el-input size="large" v-model="form.sms" placeholder="请输入验证码" type="text" maxlength="6"
                class='security-input'>
                <template #prepend>
                  <el-icon>
                    <CircleCheck />
                  </el-icon>
                </template><template #append>
                  <!-- 按钮：获取验证码按钮 -->
                  <el-button type="primary" @click="sendVerificationCode1" size="large">
                    {{ timer1 > 0 ? timer1 + ' 秒后重新发送' : '发送验证码' }}
                  </el-button>
                </template>
              </el-input>
            </div>
            <div>

              <el-button @click="handleSubmit">提交</el-button>
            </div>

          </div>
        </el-collapse-item>



      </div>
    </template>
  </el-card>


</template>


<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { getStudentInfoApi } from "@/api/student"
import { verifyPasswordApi, changePhoneNumberApi } from "@/api/user"
import { send_sms_codeApi } from '@/api/user';
import { Iphone, Lock, CircleCheck } from "@element-plus/icons-vue"


const store = useStore()
const timer1 = ref(0);

const changePwdStep = ref(1);

const form = reactive({
  is_teacher: store.state.user.is_teacher,
  password: '',
  user_id: store.state.user.user_id,
  phone_numbers: '',
  email: '',
  sms: '',
})

const verifyPassword = () => {
  verifyPasswordApi(form).then((response: any) => {
    if (response.data === false) {
      ElMessage.error('密码错误');
      return;
    }
    changePwdStep.value = 2;
  })
}
const handleSubmit = () => {
  changePhoneNumberApi(form).then((response: any) => {
    if (response.code === 200) {
      ElMessage.success('修改邮箱成功');
    } else {
      ElMessage.error('服务器错误，修改邮箱失败');
    }
  })
}
const sendVerificationCode1 = () => {
  // 判断手机号是否和当前手机号相同
  getStudentInfoApi({ user_id: store.state.user.user_id }).then((response) => {
    if (response.data.phone_numbers === form.phone_numbers) {
      ElMessage.error('输入的手机号与原手机号相同');
    }
    else {
      // 如果手机号不同，则发送验证码
      console.log("更改手机号，向新手机号发送验证码")
      if (timer1.value === 0) {
        timer1.value = 60;
        send_sms_codeApi(form);
        const interval = setInterval(() => {
          timer1.value--;
          if (timer1.value === 0) {
            clearInterval(interval);
          }
        }, 1000);
      }
    }
  }).catch((error) => {
    console.error('验证密码失败:', error);
    ElMessage.error('验证密码失败');
  });
}

</script>

<style lang="scss" scoped>
.security-input {
  margin-bottom: 20px;
  width: 100%;
  max-width: 400px
}
</style>